<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="include.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
<%@ include file="head.jsp"%>
<title>Login</title>
</head>

<body>
	<div class="container">
		<%@ include file="header.jsp"%>
		<div class="row">
			<div class="span12">
				<ul class="breadcrumb">
					<li><a href="#">Home</a> <span class="divider">/</span></li>
					<li><a href="cart.html">Shopping Cart</a> <span
						class="divider">/</span></li>
					<li class="active"><a href="http://wbpreview.com/">Checkout</a>
					</li>
				</ul>


				<div class="row">
					<div class="span12">


						<div class="accordion" id="accordion2">
							<div class="accordion-group">
								<div class="accordion-heading">
									<h3>
										<a class="accordion-toggle" data-toggle="collapse"
											data-parent="#accordion2" href="#collapseOne"> Step 1:
											Personal information </a>
									</h3>
								</div>
								<div id="collapseOne" class="accordion-body collapse in">
									<div class="accordion-inner">
										<div class="span6">
											<address>
												<strong>Account:</strong><span>&nbsp${customer.username}</span><br />
												<strong>Full name:</strong><span>&nbsp${product.lastName}
													&nbsp ${product.firstName}</span><br />
											</address>
										</div>
										<div class="span11 no_margin_left">
											<br /> <a class="btn btn-primary pull-right"
												href="#collapse3">Change</a><br /> <br /> <br />
										</div>
									</div>
								</div>

								<div class="accordion-group">
									<div class="accordion-heading">
										<h3>
											<a class="accordion-toggle" data-toggle="collapse"
												data-parent="#accordion2" href="#collapse2"> Step 2:
												Address for payment </a>
										</h3>
									</div>
									<div id="collapse2" class="accordion-body collapse">
										<div class="accordion-inner">

											<div class="span6">
												<address>
													<strong>Address:</strong><span>&nbsp${customer.address}</span><br />
													<strong>Email:</strong><span>&nbsp${customer.email}</span><br />
													<strong>Phone:</strong><span>&nbsp${customer.phoneNumber}</span><br />
												</address>
											</div>
											<div class="span11 no_margin_left">
												<br /> <a class="btn btn-primary pull-right"
													href="#collapse3">Change</a><br /> <br /> <br />
											</div>
										</div>

									</div>
								</div>


								<div class="accordion-group">
									<div class="accordion-heading">
										<h3>
											<a class="accordion-toggle" data-toggle="collapse"
												data-parent="#accordion2" href="#collapse3"> Step 3:
												Checking your cart</a>
										</h3>
									</div>
									<div id="collapse3" class="accordion-body collapse">
										<div class="accordion-inner">
											<input type="radio" value="option1" name="payment1">
											Payment online<br /> <input type="radio" value="option2"
												name="payment1"> Payment offline<br /> <br />
											<div class="control-group">
												<label for="textarea" class="control-label">Comments</label>
												<div class="controls">
													<textarea rows="3" id="textarea"
														class="input-xlarge span11"></textarea>
												</div>
											</div>
											<div class="span11 no_margin_left">
												<br /> <a class="btn btn-primary pull-right"
													href="#collapse3">Confirm order</a><br /> <br /> <br />
											</div>
										</div>
									</div>
								</div>


								<div class="accordion-group">
									<div class="accordion-heading">
										<h3>
											<a class="accordion-toggle" data-toggle="collapse"
												data-parent="#accordion2" href="#collapse4"> Step 4:
												Payment Method </a>
										</h3>
									</div>
									<div id="collapse4" class="accordion-body collapse">
										<div class="accordion-inner">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th>Image</th>
														<th>Product Name</th>
														<th>Color</th>
														<th>Quantity</th>
														<th>Unit Price</th>
														<th>Total</th>
													</tr>
												</thead>
												<tbody>
													<c:forEach items="${cart}" var="item">
														<tr>
															<td class="muted center_text"><a
																href="${pageContext.request.contextPath}/product/detail/${item.id }"><img
																	alt="" width="130" heigh="130"
																	src="${pageContext.request.contextPath}/<spring:url value="${item.imagepath}"/>" /></a>
															</td>
															<td>${item.name}</td>
															<td>${item.color}</td>
															<td>${item.quatity}></td>
															<td>&#36;${item.price}</td>
															<td>&#36;${item.price * item.quatity}</td>
														</tr>
													</c:forEach>
													<tr>
														<td>&nbsp;</td>
														<td>&nbsp;</td>
														<td>&nbsp;</td>
														<td>&nbsp;</td>
														<td>&nbsp;</td>
														<td>&nbsp;</td>
														<td><strong>&#36;${total}</strong></td>
													</tr>
												</tbody>
											</table>
											<form:form method="POST"
												action="${pageContext.request.contextPath}/shopping/payment-success">
												<div class="control-group">
													<label for="textarea" class="control-label">Note</label>
													<div class="controls">
														<textarea rows="3" id="note" name="note"
															class="input-xlarge span11"></textarea>
													</div>
												</div>
												<div class="span11 no_margin_left">
													<br />
													<button class="btn btn-primary pull-right" type="submit">Payment</button>
													<br /> <br /> <br />
												</div>
											</form:form>
										</div>
									</div>
								</div>

							</div>

						</div>
					</div>
				</div>
			</div>
			<%@ include file="footer.jsp"%>
		</div>
</body>
</html>